<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>(Hu)go Template Primer - Mars167 Blog</title>
  

<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta name="MobileOptimized" content="width"/>
<meta name="HandheldFriendly" content="true"/>


<meta name="applicable-device" content="pc,mobile">

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">

<meta name="mobile-web-app-capable" content="yes">

<meta name="author" content="mars167" />
  <meta name="description" content="Hugo uses the excellent go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in go templates.
This document is a brief primer on using go templates." />

  <meta name="keywords" content="Mars167,技术博客, blog, jane, Mars167的hugo博客, golang" />






<meta name="generator" content="Hugo 0.54.0" />


<link rel="canonical" href="https://mars167.github.io/hugo/post/goisforlovers/" />



<link rel="icon" href="/hugo/favicon.ico" />








<script src="https://cdn.jsdelivr.net/npm/eruda@1.2.6/eruda.min.js" integrity="sha256-Jmz4bc3kp+rRrXX2tGadNBKFLwtzMapr8kHABxSAAP8=" crossorigin="anonymous"></script>
<script>eruda.init();</script>



<link rel="stylesheet" href="/hugo/sass/jane.min.ec807d8b802a40889537c26e014f733206312ea440d42e1f0dabed80918de1ac.css" integrity="sha256-7IB9i4AqQIiVN8JuAU9zMgYxLqRA1C4fDavtgJGN4aw=" media="screen" crossorigin="anonymous">





<meta property="og:title" content="(Hu)go Template Primer" />
<meta property="og:description" content="Hugo uses the excellent go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in go templates.
This document is a brief primer on using go templates." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://mars167.github.io/hugo/post/goisforlovers/" />
<meta property="article:published_time" content="2014-04-02T00:00:00&#43;00:00"/>
<meta property="article:modified_time" content="2014-04-02T00:00:00&#43;00:00"/><meta property="og:site_name" content="Mars167 Blog" />

<meta itemprop="name" content="(Hu)go Template Primer">
<meta itemprop="description" content="Hugo uses the excellent go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in go templates.
This document is a brief primer on using go templates.">


<meta itemprop="datePublished" content="2014-04-02T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2014-04-02T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="1559">



<meta itemprop="keywords" content="go,golang,templates,themes,development," />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="(Hu)go Template Primer"/>
<meta name="twitter:description" content="Hugo uses the excellent go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in go templates.
This document is a brief primer on using go templates."/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->




</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/hugo/" class="logo">Mars167</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/post/">Archives</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/tags/">Tags</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/categories/">Categories</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/golang/">Golang</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/leetcode/">Leetcode刷题</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/yii2/">Yii2</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/">Home</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          <div class="mobile-menu-parent">
            <span class="mobile-submenu-open"></span>
            <a href="https://mars167.github.io/hugo/">
              docs
            </a>
          </div>
          <ul class="mobile-submenu-list">
            
              <li>
                <a href="https://mars167.github.io/hugo/post/jane-theme-preview/">Jane Theme Preview</a>
              </li>
            
              <li>
                <a href="https://mars167.github.io/hugo/post/shortcodes-preview/">Shortcodes Preview</a>
              </li>
            
              <li>
                <a href="https://mars167.github.io/hugo/post/image-preview/">Image Preview</a>
              </li>
            
              <li>
                <a href="https://mars167.github.io/hugo/post/syntax-highlighting/">Syntax Highlighting</a>
              </li>
            
          </ul>
        
      </li>
    
  </ul>
</nav>


  
    






  <link rel="stylesheet" href="/hugo/lib/photoswipe/photoswipe.min.css" />
  <link rel="stylesheet" href="/hugo/lib/photoswipe/default-skin/default-skin.min.css" />




<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<div class="pswp__bg"></div>

<div class="pswp__scroll-wrap">
    
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      
      
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
</div>

  

  

  <header id="header" class="header container">
    <div class="logo-wrapper">
  <a href="/hugo/" class="logo">
    
      Mars167
    
  </a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/post/">Archives</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/tags/">Tags</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/categories/">Categories</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/golang/">Golang</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/leetcode/">Leetcode刷题</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/yii2/">Yii2</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://mars167.github.io/hugo/">Home</a>
          

        

      </li>
    
        <li class="menu-item">
        
          
          <a class="menu-item-link menu-parent" href="https://mars167.github.io/hugo/">docs</a>
          <ul class="submenu">
            
              <li>
                <a href="https://mars167.github.io/hugo/post/jane-theme-preview/">Jane Theme Preview</a>
              </li>
            
              <li>
                <a href="https://mars167.github.io/hugo/post/shortcodes-preview/">Shortcodes Preview</a>
              </li>
            
              <li>
                <a href="https://mars167.github.io/hugo/post/image-preview/">Image Preview</a>
              </li>
            
              <li>
                <a href="https://mars167.github.io/hugo/post/syntax-highlighting/">Syntax Highlighting</a>
              </li>
            
          </ul>

        

      </li>
    
    
  </ul>
</nav>

  </header>

  <div id="mobile-panel">
    <main id="main" class="main bg-llight">
      <div class="content-wrapper">
        <div id="content" class="content container">
          <article class="post bg-white">
    
    <header class="post-header">
      <h1 class="post-title">(Hu)go Template Primer</h1>
      
      <div class="post-meta">
        <time datetime="2014-04-02" class="post-time">
          2014-04-02
        </time>
        <div class="post-category">
            <a href="https://mars167.github.io/hugo/categories/development/"> Development </a>
            <a href="https://mars167.github.io/hugo/categories/golang/"> golang </a>
            <a href="https://mars167.github.io/hugo/categories/index/"> index </a>
            
          </div>
        <span class="more-meta"> 约 1559 字 </span>
          <span class="more-meta"> 预计阅读 8 分钟 </span>

        
        
          <span id="busuanzi_container_page_pv">
            | 阅读 <span id="busuanzi_value_page_pv"></span>
          </span>
        

        
        
      </div>
    </header>

    
    
<div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
<ul>
<li>
<ul>
<li><a href="#introduction-to-go-templates">Introduction to Go Templates</a></li>
<li><a href="#basic-syntax">Basic Syntax</a></li>
<li><a href="#variables">Variables</a></li>
<li><a href="#functions">Functions</a></li>
<li><a href="#includes">Includes</a></li>
<li><a href="#logic">Logic</a>
<ul>
<li><a href="#iteration">Iteration</a></li>
<li><a href="#conditionals">Conditionals</a></li>
</ul></li>
<li><a href="#pipes">Pipes</a></li>
<li><a href="#context-aka-the-dot">Context (aka. the dot)</a></li>
</ul></li>
<li><a href="#hugo-parameters">Hugo Parameters</a>
<ul>
<li><a href="#using-content-page-parameters">Using Content (page) Parameters</a></li>
<li><a href="#using-site-config-parameters">Using Site (config) Parameters</a></li>
</ul></li>
</ul>
</nav>
  </div>
</div>

    
    <div class="post-content">
      

<p>Hugo uses the excellent <a href="http://golang.org/&gt;">go</a> <a href="http://golang.org/pkg/html/template/&gt;">html/template</a> library for
its template engine. It is an extremely lightweight engine that provides a very
small amount of logic. In our experience that it is just the right amount of
logic to be able to create a good static website. If you have used other
template systems from different languages or frameworks you will find a lot of
similarities in go templates.</p>

<p>This document is a brief primer on using go templates. The <a href="http://golang.org/pkg/html/template/&gt;">go docs</a>
provide more details.</p>

<h2 id="introduction-to-go-templates">Introduction to Go Templates</h2>

<p>Go templates provide an extremely simple template language. It adheres to the
belief that only the most basic of logic belongs in the template or view layer.
One consequence of this simplicity is that go templates parse very quickly.</p>

<p>A unique characteristic of go templates is they are content aware. Variables and
content will be sanitized depending on the context of where they are used. More
details can be found in the <a href="http://golang.org/pkg/html/template/&gt;">go docs</a>.</p>

<h2 id="basic-syntax">Basic Syntax</h2>

<p>Go lang templates are html files with the addition of variables and
functions.</p>

<p><strong>Go variables and functions are accessible within {{ }}</strong></p>

<p>Accessing a predefined variable &ldquo;foo&rdquo;:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ foo }}</pre></td></tr></table>
</div>
</div>
<p><strong>Parameters are separated using spaces</strong></p>

<p>Calling the add function with input of 1, 2:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ add 1 2 }}</pre></td></tr></table>
</div>
</div>
<p><strong>Methods and fields are accessed via dot notation</strong></p>

<p>Accessing the Page Parameter &ldquo;bar&rdquo;</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ .Params.bar }}</pre></td></tr></table>
</div>
</div>
<p><strong>Parentheses can be used to group items together</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if or (isset .Params &#34;alt&#34;) (isset .Params &#34;caption&#34;) }} Caption {{ end }}</pre></td></tr></table>
</div>
</div>
<h2 id="variables">Variables</h2>

<p>Each go template has a struct (object) made available to it. In hugo each
template is passed either a page or a node struct depending on which type of
page you are rendering. More details are available on the
<a href="/layout/variables">variables</a> page.</p>

<p>A variable is accessed by referencing the variable name.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">&lt;title&gt;{{ .Title }}&lt;/title&gt;</pre></td></tr></table>
</div>
</div>
<p>Variables can also be defined and referenced.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ $address := &#34;123 Main St.&#34;}}
{{ $address }}</pre></td></tr></table>
</div>
</div>
<h2 id="functions">Functions</h2>

<p>Go template ship with a few functions which provide basic functionality. The go
template system also provides a mechanism for applications to extend the
available functions with their own. <a href="/layout/functions">Hugo template
functions</a> provide some additional functionality we believe
are useful for building websites. Functions are called by using their name
followed by the required parameters separated by spaces. Template
functions cannot be added without recompiling hugo.</p>

<p><strong>Example:</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ add 1 2 }}</pre></td></tr></table>
</div>
</div>
<h2 id="includes">Includes</h2>

<p>When including another template you will pass to it the data it will be
able to access. To pass along the current context please remember to
include a trailing dot. The templates location will always be starting at
the /layout/ directory within Hugo.</p>

<p><strong>Example:</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ template &#34;chrome/header.html&#34; . }}</pre></td></tr></table>
</div>
</div>
<h2 id="logic">Logic</h2>

<p>Go templates provide the most basic iteration and conditional logic.</p>

<h3 id="iteration">Iteration</h3>

<p>Just like in go, the go templates make heavy use of range to iterate over
a map, array or slice. The following are different examples of how to use
range.</p>

<p><strong>Example 1: Using Context</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ range array }}
    {{ . }}
{{ end }}</pre></td></tr></table>
</div>
</div>
<p><strong>Example 2: Declaring value variable name</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{range $element := array}}
    {{ $element }}
{{ end }}</pre></td></tr></table>
</div>
</div>
<p><strong>Example 2: Declaring key and value variable name</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{range $index, $element := array}}
    {{ $index }}
    {{ $element }}
{{ end }}</pre></td></tr></table>
</div>
</div>
<h3 id="conditionals">Conditionals</h3>

<p>If, else, with, or, &amp; and provide the framework for handling conditional
logic in Go Templates. Like range, each statement is closed with <code>end</code>.</p>

<p>Go Templates treat the following values as false:</p>

<ul>
<li>false</li>
<li>0</li>
<li>any array, slice, map, or string of length zero</li>
</ul>

<p><strong>Example 1: If</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if isset .Params &#34;title&#34; }}&lt;h4&gt;{{ index .Params &#34;title&#34; }}&lt;/h4&gt;{{ end }}</pre></td></tr></table>
</div>
</div>
<p><strong>Example 2: If -&gt; Else</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if isset .Params &#34;alt&#34; }}
    {{ index .Params &#34;alt&#34; }}
{{else}}
    {{ index .Params &#34;caption&#34; }}
{{ end }}</pre></td></tr></table>
</div>
</div>
<p><strong>Example 3: And &amp; Or</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if and (or (isset .Params &#34;title&#34;) (isset .Params &#34;caption&#34;)) (isset .Params &#34;attr&#34;)}}</pre></td></tr></table>
</div>
</div>
<p><strong>Example 4: With</strong></p>

<p>An alternative way of writing &ldquo;if&rdquo; and then referencing the same value
is to use &ldquo;with&rdquo; instead. With rebinds the context <code>.</code> within its scope,
and skips the block if the variable is absent.</p>

<p>The first example above could be simplified as:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ with .Params.title }}&lt;h4&gt;{{ . }}&lt;/h4&gt;{{ end }}</pre></td></tr></table>
</div>
</div>
<p><strong>Example 5: If -&gt; Else If</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if isset .Params &#34;alt&#34; }}
    {{ index .Params &#34;alt&#34; }}
{{ else if isset .Params &#34;caption&#34; }}
    {{ index .Params &#34;caption&#34; }}
{{ end }}</pre></td></tr></table>
</div>
</div>
<h2 id="pipes">Pipes</h2>

<p>One of the most powerful components of go templates is the ability to
stack actions one after another. This is done by using pipes. Borrowed
from unix pipes, the concept is simple, each pipeline&rsquo;s output becomes the
input of the following pipe.</p>

<p>Because of the very simple syntax of go templates, the pipe is essential
to being able to chain together function calls. One limitation of the
pipes is that they only can work with a single value and that value
becomes the last parameter of the next pipeline.</p>

<p>A few simple examples should help convey how to use the pipe.</p>

<p><strong>Example 1 :</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if eq 1 1 }} Same {{ end }}</pre></td></tr></table>
</div>
</div>
<p>is the same as</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ eq 1 1 | if }} Same {{ end }}</pre></td></tr></table>
</div>
</div>
<p>It does look odd to place the if at the end, but it does provide a good
illustration of how to use the pipes.</p>

<p><strong>Example 2 :</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ index .Params &#34;disqus_url&#34; | html }}</pre></td></tr></table>
</div>
</div>
<p>Access the page parameter called &ldquo;disqus_url&rdquo; and escape the HTML.</p>

<p><strong>Example 3 :</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{ if or (or (isset .Params &#34;title&#34;) (isset .Params &#34;caption&#34;)) (isset .Params &#34;attr&#34;)}}
Stuff Here
{{ end }}</pre></td></tr></table>
</div>
</div>
<p>Could be rewritten as</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{  isset .Params &#34;caption&#34; | or isset .Params &#34;title&#34; | or isset .Params &#34;attr&#34; | if }}
Stuff Here
{{ end }}</pre></td></tr></table>
</div>
</div>
<h2 id="context-aka-the-dot">Context (aka. the dot)</h2>

<p>The most easily overlooked concept to understand about go templates is that {{ . }}
always refers to the current context. In the top level of your template this
will be the data set made available to it. Inside of a iteration it will have
the value of the current item. When inside of a loop the context has changed. .
will no longer refer to the data available to the entire page. If you need to
access this from within the loop you will likely want to set it to a variable
instead of depending on the context.</p>

<p><strong>Example:</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></pre></td>
<td class="lntd">
<pre class="chroma">  {{ $title := .Site.Title }}
  {{ range .Params.tags }}
    &lt;li&gt; &lt;a href=&#34;{{ $baseurl }}/tags/{{ . | urlize }}&#34;&gt;{{ . }}&lt;/a&gt; - {{ $title }} &lt;/li&gt;
  {{ end }}</pre></td></tr></table>
</div>
</div>
<p>Notice how once we have entered the loop the value of {{ . }} has changed. We
have defined a variable outside of the loop so we have access to it from within
the loop.</p>

<h1 id="hugo-parameters">Hugo Parameters</h1>

<p>Hugo provides the option of passing values to the template language
through the site configuration (for sitewide values), or through the meta
data of each specific piece of content. You can define any values of any
type (supported by your front matter/config format) and use them however
you want to inside of your templates.</p>

<h2 id="using-content-page-parameters">Using Content (page) Parameters</h2>

<p>In each piece of content you can provide variables to be used by the
templates. This happens in the <a href="/content/front-matter">front matter</a>.</p>

<p>An example of this is used in this documentation site. Most of the pages
benefit from having the table of contents provided. Sometimes the TOC just
doesn&rsquo;t make a lot of sense. We&rsquo;ve defined a variable in our front matter
of some pages to turn off the TOC from being displayed.</p>

<p>Here is the example front matter:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></pre></td>
<td class="lntd">
<pre class="chroma">---
title: &#34;Permalinks&#34;
date: &#34;2013-11-18&#34;
aliases:
  - &#34;/doc/permalinks/&#34;
groups: [&#34;extras&#34;]
groups_weight: 30
notoc: true
---</pre></td></tr></table>
</div>
</div>
<p>Here is the corresponding code inside of the template:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></pre></td>
<td class="lntd">
<pre class="chroma">  {{ if not .Params.notoc }}
    &lt;div id=&#34;toc&#34; class=&#34;well col-md-4 col-sm-6&#34;&gt;
    {{ .TableOfContents }}
    &lt;/div&gt;
  {{ end }}</pre></td></tr></table>
</div>
</div>
<h2 id="using-site-config-parameters">Using Site (config) Parameters</h2>

<p>In your top-level configuration file (eg, <code>config.yaml</code>) you can define site
parameters, which are values which will be available to you in chrome.</p>

<p>For instance, you might declare:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml">params<span class="p">:</span><span class="w">
</span><span class="w">  </span>CopyrightHTML<span class="p">:</span><span class="w"> </span><span class="s2">&#34;Copyright &amp;#xA9; 2013 John Doe. All Rights Reserved.&#34;</span><span class="w">
</span><span class="w">  </span>TwitterUser<span class="p">:</span><span class="w"> </span><span class="s2">&#34;spf13&#34;</span><span class="w">
</span><span class="w">  </span>SidebarRecentLimit<span class="p">:</span><span class="w"> </span><span class="m">5</span></code></pre></td></tr></table>
</div>
</div>
<p>Within a footer layout, you might then declare a <code>&lt;footer&gt;</code> which is only
provided if the <code>CopyrightHTML</code> parameter is provided, and if it is given,
you would declare it to be HTML-safe, so that the HTML entity is not escaped
again.  This would let you easily update just your top-level config file each
January 1st, instead of hunting through your templates.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{if .Site.Params.CopyrightHTML}}&lt;footer&gt;
&lt;div class=&#34;text-center&#34;&gt;{{.Site.Params.CopyrightHTML | safeHtml}}&lt;/div&gt;
&lt;/footer&gt;{{end}}</pre></td></tr></table>
</div>
</div>
<p>An alternative way of writing the &ldquo;if&rdquo; and then referencing the same value
is to use &ldquo;with&rdquo; instead. With rebinds the context <code>.</code> within its scope,
and skips the block if the variable is absent:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{with .Site.Params.TwitterUser}}&lt;span class=&#34;twitter&#34;&gt;
&lt;a href=&#34;https://twitter.com/{{.}}&#34; rel=&#34;author&#34;&gt;
&lt;img src=&#34;/images/twitter.png&#34; width=&#34;48&#34; height=&#34;48&#34; title=&#34;Twitter: {{.}}&#34;
 alt=&#34;Twitter&#34;&gt;&lt;/a&gt;
&lt;/span&gt;{{end}}</pre></td></tr></table>
</div>
</div>
<p>Finally, if you want to pull &ldquo;magic constants&rdquo; out of your layouts, you can do
so, such as in this example:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></pre></td>
<td class="lntd">
<pre class="chroma">&lt;nav class=&#34;recent&#34;&gt;
  &lt;h1&gt;Recent Posts&lt;/h1&gt;
  &lt;ul&gt;{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
    &lt;li&gt;&lt;a href=&#34;{{.RelPermalink}}&#34;&gt;{{.Title}}&lt;/a&gt;&lt;/li&gt;
  {{end}}&lt;/ul&gt;
&lt;/nav&gt;</pre></td></tr></table>
</div>
</div>
    </div>

    
    
<div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">mars167</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">2014-04-02</span>
  </p>
  
  <p class="copyright-item">
    <span class="item-title">许可协议</span>
    <span class="item-content"><a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a></span>
  </p>
</div>


    
    

    <footer class="post-footer">
      <div class="post-tags">
          <a href="https://mars167.github.io/hugo/tags/go/">go</a>
          <a href="https://mars167.github.io/hugo/tags/golang/">golang</a>
          <a href="https://mars167.github.io/hugo/tags/templates/">templates</a>
          <a href="https://mars167.github.io/hugo/tags/themes/">themes</a>
          <a href="https://mars167.github.io/hugo/tags/development/">development</a>
          
        </div>

      
      <nav class="post-nav">
        
          <a class="prev" href="/hugo/post/creating-a-new-theme/">
            
            <i class="iconfont">
              <svg  class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="18" height="18">
  <path d="M691.908486 949.511495l75.369571-89.491197c10.963703-12.998035 10.285251-32.864502-1.499144-44.378743L479.499795 515.267417 757.434875 204.940602c11.338233-12.190647 11.035334-32.285311-0.638543-44.850487l-80.46666-86.564541c-11.680017-12.583596-30.356378-12.893658-41.662889-0.716314L257.233596 494.235404c-11.332093 12.183484-11.041474 32.266891 0.657986 44.844348l80.46666 86.564541c1.772366 1.910513 3.706415 3.533476 5.750981 4.877077l306.620399 321.703933C662.505829 963.726242 680.945807 962.528973 691.908486 949.511495z"></path>
</svg>

            </i>
            <span class="prev-text nav-default">Creating a New Theme</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        
          <a class="next" href="/hugo/post/hugoisforlovers/">
            <span class="next-text nav-default">Getting Started with Hugo</span>
            <span class="prev-text nav-mobile">下一篇</span>
            
            <i class="iconfont">
              <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="18" height="18">
  <path d="M332.091514 74.487481l-75.369571 89.491197c-10.963703 12.998035-10.285251 32.864502 1.499144 44.378743l286.278095 300.375162L266.565125 819.058374c-11.338233 12.190647-11.035334 32.285311 0.638543 44.850487l80.46666 86.564541c11.680017 12.583596 30.356378 12.893658 41.662889 0.716314l377.434212-421.426145c11.332093-12.183484 11.041474-32.266891-0.657986-44.844348l-80.46666-86.564541c-1.772366-1.910513-3.706415-3.533476-5.750981-4.877077L373.270379 71.774697C361.493148 60.273758 343.054193 61.470003 332.091514 74.487481z"></path>
</svg>

            </i>
          </a>
      </nav>
    </footer>
  </article>

  
  
  
  

  
  

  
  

  

  

  
  
    



        </div>
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="icon-links">
  
  
    <a href="mailto:sunjinhui167@163.com" rel="me noopener" class="iconfont"
      title="email" >
      <svg class="icon" viewBox="0 0 1451 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="36" height="36">
  <path d="M664.781909 681.472759 0 97.881301C0 3.997201 71.046997 0 71.046997 0L474.477909 0 961.649408 0 1361.641813 0C1361.641813 0 1432.688811 3.997201 1432.688811 97.881301L771.345323 681.472759C771.345323 681.472759 764.482731 685.154773 753.594283 688.65053L753.594283 688.664858C741.602731 693.493018 729.424896 695.068979 718.077952 694.839748 706.731093 695.068979 694.553173 693.493018 682.561621 688.664858L682.561621 688.65053C671.644501 685.140446 664.781909 681.472759 664.781909 681.472759L664.781909 681.472759ZM718.063616 811.603883C693.779541 811.016482 658.879232 802.205449 619.10784 767.734955 542.989056 701.759633 0 212.052267 0 212.052267L0 942.809523C0 942.809523 0 1024 83.726336 1024L682.532949 1024 753.579947 1024 1348.948139 1024C1432.688811 1024 1432.688811 942.809523 1432.688811 942.809523L1432.688811 212.052267C1432.688811 212.052267 893.138176 701.759633 817.019477 767.734955 777.248 802.205449 742.347691 811.03081 718.063616 811.603883L718.063616 811.603883Z"></path>
</svg>

    </a>
  
    <a href="https://www.facebook.com/Mars167-374743549936970/" rel="me noopener" class="iconfont"
      title="facebook"  target="_blank"
      >
      <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="33" height="33">
  <path d="M965.7344 2.7648c14.848 0 28.2624 5.5296 40.2432 16.6912C1017.9584 30.5152 1024 43.52 1024 58.2656l0 910.2336c0 14.848-6.0416 27.7504-18.0224 38.8096C993.8944 1018.4704 980.48 1024 965.7344 1024L704.9216 1024 704.9216 629.9648l133.2224 0 19.456-155.4432-152.576 0L705.024 373.0432c0-50.688 25.9072-76.0832 77.7216-76.0832l80.4864 0L863.232 163.5328c-27.7504-5.4272-67.4816-8.192-119.296-8.192-59.1872 0-106.8032 18.0224-142.9504 54.0672C564.736 245.5552 546.7136 296.0384 546.7136 360.7552l0 113.7664L413.4912 474.5216l0 155.4432 133.2224 0L546.7136 1024 55.5008 1024c-14.848 0-27.7504-5.5296-38.8096-16.6912C5.5296 996.2496 0 983.3472 0 968.4992L0 58.2656C0 43.52 5.5296 30.5152 16.6912 19.456c11.0592-11.0592 24.064-16.6912 38.8096-16.6912L965.7344 2.7648z"></path>
</svg>

    </a>
  
    <a href="https://www.linkedin.com/in/%E9%87%91%E8%BE%89-%E5%AD%99-52a350163/" rel="me noopener" class="iconfont"
      title="linkedin"  target="_blank"
      >
      <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="33" height="33">
  <path d="M872.405333 872.618667h-151.637333v-237.610667c0-56.661333-1.152-129.578667-79.018667-129.578667-79.061333 0-91.136 61.653333-91.136 125.397334v241.792H398.976V384h145.664v66.602667h1.962667c20.352-38.4 69.845333-78.933333 143.786666-78.933334 153.642667 0 182.058667 101.12 182.058667 232.746667v268.202667zM227.712 317.141333a87.978667 87.978667 0 0 1-88.021333-88.106666 88.064 88.064 0 1 1 88.021333 88.106666z m76.032 555.477334H151.68V384h152.064v488.618667zM948.266667 0H75.562667C33.792 0 0 33.024 0 73.770667v876.458666C0 991.018667 33.792 1024 75.562667 1024h872.576C989.866667 1024 1024 991.018667 1024 950.229333V73.770667C1024 33.024 989.866667 0 948.138667 0h0.128z"></path>
</svg>

    </a>
  
    <a href="https://github.com/mars167" rel="me noopener" class="iconfont"
      title="github"  target="_blank"
      >
      <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="36" height="36">
  <path d="M512 12.672c-282.88 0-512 229.248-512 512 0 226.261333 146.688 418.133333 350.08 485.76 25.6 4.821333 34.986667-11.008 34.986667-24.618667 0-12.16-0.426667-44.373333-0.64-87.04-142.421333 30.890667-172.458667-68.693333-172.458667-68.693333C188.672 770.986667 155.008 755.2 155.008 755.2c-46.378667-31.744 3.584-31.104 3.584-31.104 51.413333 3.584 78.421333 52.736 78.421333 52.736 45.653333 78.293333 119.850667 55.68 149.12 42.581333 4.608-33.109333 17.792-55.68 32.426667-68.48-113.706667-12.8-233.216-56.832-233.216-253.013333 0-55.893333 19.84-101.546667 52.693333-137.386667-5.76-12.928-23.04-64.981333 4.48-135.509333 0 0 42.88-13.738667 140.8 52.48 40.96-11.392 84.48-17.024 128-17.28 43.52 0.256 87.04 5.888 128 17.28 97.28-66.218667 140.16-52.48 140.16-52.48 27.52 70.528 10.24 122.581333 5.12 135.509333 32.64 35.84 52.48 81.493333 52.48 137.386667 0 196.693333-119.68 240-233.6 252.586667 17.92 15.36 34.56 46.762667 34.56 94.72 0 68.522667-0.64 123.562667-0.64 140.202666 0 13.44 8.96 29.44 35.2 24.32C877.44 942.592 1024 750.592 1024 524.672c0-282.752-229.248-512-512-512"></path>
</svg>

    </a>


<a href="https://mars167.github.io/hugo/index.xml" rel="noopener alternate" type="application/rss&#43;xml"
    class="iconfont" title="rss" target="_blank">
    <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="30" height="30">
  <path d="M819.157333 1024C819.157333 574.592 449.408 204.8 0 204.8V0c561.706667 0 1024 462.293333 1024 1024h-204.842667zM140.416 743.04a140.8 140.8 0 0 1 140.501333 140.586667A140.928 140.928 0 0 1 140.074667 1024C62.72 1024 0 961.109333 0 883.626667s62.933333-140.544 140.416-140.586667zM678.784 1024h-199.04c0-263.210667-216.533333-479.786667-479.744-479.786667V345.173333c372.352 0 678.784 306.517333 678.784 678.826667z"></path>
</svg>

  </a>
   
</div>

<div class="copyright">
  <span class="power-by">
    Powered by <a class="hexo-link" href="https://gohugo.io">Hugo</a>
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    Theme - <a class="theme-link" href="https://github.com/xianmin/hugo-theme-jane">Jane</a>
  </span>

  <span class="copyright-year">
    &copy;
    2019
    <span class="heart">
      
      <i class="iconfont">
        <svg class="icon" viewBox="0 0 1025 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="14" height="14">
  <path d="M1000.1 247.9c-15.5-37.3-37.6-70.6-65.7-98.9-54.4-54.8-125.8-85-201-85-85.7 0-166 39-221.4 107.4C456.6 103 376.3 64 290.6 64c-75.1 0-146.5 30.4-201.1 85.6-28.2 28.5-50.4 61.9-65.8 99.3-16 38.8-24 79.9-23.6 122.2 0.7 91.7 40.1 177.2 108.1 234.8 3.1 2.6 6 5.1 8.9 7.8 14.9 13.4 58 52.8 112.6 102.7 93.5 85.5 209.9 191.9 257.5 234.2 7 6.1 15.8 9.5 24.9 9.5 9.2 0 18.1-3.4 24.9-9.5 34.5-30.7 105.8-95.9 181.4-165 74.2-67.8 150.9-138 195.8-178.2 69.5-57.9 109.6-144.4 109.9-237.3 0.1-42.5-8-83.6-24-122.2z"
   fill="#8a8a8a"></path>
</svg>

      </i>
    </span><span class="author">
        mars167
        
      </span></span>

  
  
    <span id="busuanzi_container">
      访客数/访问量：<span id="busuanzi_value_site_uv"></span>/<span id="busuanzi_value_site_pv"></span>
    </span>
  

  
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont">
        
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="35" height="35">
  <path d="M510.866688 227.694839 95.449397 629.218702l235.761562 0-2.057869 328.796468 362.40389 0L691.55698 628.188232l241.942331-3.089361L510.866688 227.694839zM63.840492 63.962777l894.052392 0 0 131.813095L63.840492 195.775872 63.840492 63.962777 63.840492 63.962777zM63.840492 63.962777"></path>
</svg>

      </i>
    </div>
  </div>
  
<script type="text/javascript" src="/hugo/lib/jquery/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="/hugo/lib/slideout/slideout-1.0.1.min.js"></script>




<script type="text/javascript" src="/hugo/js/main.638251f4230630f0335d8c6748e53a96f94b72670920b60c09a56fdc8bece214.js" integrity="sha256-Y4JR9CMGMPAzXYxnSOU6lvlLcmcJILYMCaVv3Ivs4hQ=" crossorigin="anonymous"></script>






  
    <script type="text/javascript" src="/hugo/js/load-photoswipe.js"></script>
    <script type="text/javascript" src="/hugo/lib/photoswipe/photoswipe.min.js"></script>
    <script type="text/javascript" src="/hugo/lib/photoswipe/photoswipe-ui-default.min.js"></script>
  




  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>






  <script id="dsq-count-scr" src="//.disqus.com/count.js" async></script>





</body>
</html>
